<template>
    <!-- 业务进件业务信息:zrrRzYwxx -->
    <div>
        <div class="w_100 headTips d_f j_c_s_b">
            <div class="d_f a_i_c">
                <div class="line"></div>
                {{ name }}
            </div>
            <div class="isClose" @click="close">
                <el-icon v-if="type == 'smallForm'">
                    <CloseBold />
                </el-icon>
            </div>
            <el-switch v-if="type == 'bigForm'" @change="change" v-model="status"
                style="--el-switch-on-color: #13ce66;" />
            <el-button type="primary" v-if="type == 'useForm' && isReset == 1" @click="clearForm">清除表单</el-button>
        </div>
        <div class="formBox fzRzYwxx">
            <div class="formArrow d_f a_i_c">
                <img src="../../assets/formArrow.png" alt="">
                <span>基本信息</span>
            </div>
            <myform :fields="typeFields" @handleSelect="handleSelect" :rules="rules" :options="options"
                :model="model.rzServiceData">
            </myform>
            <div v-if="model.rzServiceData.customerType == '1'">
                <div class=""
                    :class="model.rzServiceData.baseDataMaritalStatus != '1' ? 'naturalBusiness_form1' : 'naturalBusiness_form1Show'">
                    <myform :fields="fields" @handleSelect="handleSelect" ref="form1" :rules="rules"
                        @handleInput="handleSelect" :model="model.rzServiceData" :options="options" class="m_t_16">
                        <template v-slot:baseDataAddress>
                            <el-cascader :disabled="isAudit" v-model="model.rzServiceData.baseDataAddress"
                                placeholder="请选择省市区" :options="districts" :props="areaProps" />
                        </template>
                    </myform>
                </div>
                <div class="segment"></div>
                <div class="formArrow d_f a_i_c m_t_30">
                    <img src="../../assets/formArrow.png" alt="">
                    <span>家庭基本情况</span>
                </div>
                <div class="naturalBusiness_form2">
                    <myform :fields="fields1" :model="model.rzServiceData" :rules="rules" class="m_t_16">
                        <template v-slot:familyName>
                            <mytable :fields="tableFields" :defaultList="model.rzServiceData.familyHum" :serial="false"
                                :handle="false" ref="tableRef" :isPaginationShow="false" api="" class="m_t_16"
                                :isSelection="false"></mytable>
                            <div v-if="show" class="d_f w_100 j_c_s_b">
                                <div class="input"> <el-input v-model="values.name" placeholder="请输入姓名" clearable />
                                </div>
                                <div class="input"><el-input v-model="values.relation" placeholder="请输入与业主的关系"
                                        clearable />
                                </div>
                                <div class="input"><el-input v-model="values.job" placeholder="请输入职业" clearable /></div>
                                <el-button type="primary" @click="success">完 成</el-button>
                            </div>
                            <div class="d_f j_c_s_b w_100 m_t_20">
                                <div></div>
                                <div>
                                    <img src="../../assets/reduce.png" alt="" class="icon"
                                        v-if="model.rzServiceData.familyHum.length > 0 && !isAudit" @click="reduce">
                                    <img src="../../assets/add.png" alt="" v-if="!isAudit" @click="show = true"
                                        class="icon m_l_10">
                                </div>
                            </div>
                        </template>
                    </myform>
                </div>
                <div class="segment"></div>
                <div class="formArrow d_f a_i_c m_t_30">
                    <img src="../../assets/formArrow.png" alt="">
                    <span>负债情况</span>
                </div>
                <div class="naturalBusiness_form3">
                    <myform :fields="fields2" :rules="rules" @handleSelect="handleSelect" :options="options" ref="form3"
                        :model="model.rzServiceData" class="m_t_16">
                    </myform>
                </div>
                <div class="segment"></div>
                <div class="formArrow d_f a_i_c m_t_30">
                    <img src="../../assets/formArrow.png" alt="">
                    <span>其他信息</span>
                </div>
                <div class="naturalBusiness_form4">
                    <myform :fields="fields3" :rules="rules" @handleSelect="handleSelect" :options="options"
                        :model="model.rzServiceData" class="m_t_16">
                        <template v-slot:userTag>
                            <div class="d_f f_w_w left" v-if="type != 'smallForm'">
                                <div v-for="(item, index) in options.userTag" @click="getTag(item, index)"
                                    class="box m_l_10 m_t_5" :class="{ 'active': item.checked }">
                                    {{ item.name }}
                                </div>
                            </div>
                            <div class="d_f f_w_w left" v-else>
                                <div v-for="(item, index) in options.userTag" @click="getTag(item, index)"
                                    class="box1 m_l_10 m_t_5" :class="{ 'active1': item.checked }">
                                    {{ item.name }}
                                </div>
                            </div>
                        </template>
                        <template v-slot:policyProduct>
                            <el-checkbox-group :disabled="isAudit" v-model="model.rzServiceData.policyProduct">
                                <el-checkbox v-for="(item, index) in options.policyProduct" :key="index"
                                    :label="item.name" :value="item.id" />
                            </el-checkbox-group>
                        </template>
                        <template v-slot:strategy>
                            <el-checkbox-group :disabled="isAudit" v-model="model.rzServiceData.strategy">
                                <el-checkbox v-for="(item, index) in options.strategy" :key="index" :label="item.name"
                                    :value="item.id" />
                            </el-checkbox-group>
                        </template>
                        <template v-slot:relationName>
                            <div class="d_f j_c_s_b " id="relation"
                                v-if="model.rzServiceData.otherBusinessType == '88'">
                                <div style="width: 45%;">
                                    关联方名称
                                    <el-input :disabled="isAudit" v-model="model.rzServiceData.relationName"
                                        placeholder="请输入" clearable />
                                </div>
                                <div style="width: 45%;">
                                    关联方关系
                                    <el-select :disabled="isAudit" clearable v-model="model.rzServiceData.relation"
                                        no-match-text="无匹配数据" no-data-text='无匹配数据' placeholder="请选择">
                                        <el-option v-for="opt in options.relation" :key="opt.id" :label="opt.name"
                                            :value="opt.id" :disabled="opt.disabled" />
                                    </el-select>
                                </div>
                            </div>
                        </template>
                    </myform>
                </div>
            </div>
            <div v-else>
                <div
                    :class="{ 'fzRzYwxx_form1': model.rzServiceData.legalMaritalStatus != '1' && model.rzServiceData.actualMaritalStatus != '1', 'fzRzYwxx_form1Show1': (model.rzServiceData.legalMaritalStatus == '1' && model.rzServiceData.actualMaritalStatus != '1')||(model.rzServiceData.legalMaritalStatus != '1' && model.rzServiceData.actualMaritalStatus == '1'), 'fzRzYwxx_form1Show2': model.rzServiceData.legalMaritalStatus == '1' && model.rzServiceData.actualMaritalStatus == '1' }">
                    <myform :fields="fields5" @handleSelect="handleSelect" ref="form2" :rules="rules1"
                        @handleInput="handleSelect" :model="model.rzServiceData" :options="options" class="m_t_16">
                        <template v-slot:engageAddress>
                            <el-cascader v-model="model.rzServiceData.engageAddress" :disabled="isAudit"
                                placeholder="请选择省市区" :options="districts" :props="areaProps" />
                        </template>
                    </myform>
                </div>
                <div class="segment"></div>
                <div class="formArrow d_f a_i_c m_t_30">
                    <img src="../../assets/formArrow.png" alt="">
                    <span>负债情况</span>
                </div>
                <div class="naturalBusiness_form3">
                    <myform :fields="fields6" ref="form3" :rules="rules" @handleSelect="handleSelect" :options="options"
                        :model="model.rzServiceData" class="m_t_16">
                    </myform>
                </div>
                <div class="segment"></div>
                <div class="formArrow d_f a_i_c m_t_30">
                    <img src="../../assets/formArrow.png" alt="">
                    <span>其他信息</span>
                </div>
                <div class="naturalBusiness_form4">
                    <myform :fields="fields3" :rules="rules1" :options="options" :model="model.rzServiceData"
                        class="m_t_16">
                        <template v-slot:userTag>
                            <div class="d_f f_w_w left" v-if="type != 'smallForm'">
                                <div v-for="(item, index) in options.userTag" @click="getTag(item, index)"
                                    class="box m_l_10 m_t_5" :class="{ 'active': item.checked }">
                                    {{ item.name }}
                                </div>
                            </div>
                            <div class="d_f f_w_w left" v-else>
                                <div v-for="(item, index) in options.userTag" @click="getTag(item, index)"
                                    class="box1 m_l_10 m_t_5" :class="{ 'active1': item.checked }">
                                    {{ item.name }}
                                </div>
                            </div>
                        </template>
                        <template v-slot:policyProduct>
                            <el-checkbox-group :disabled="isAudit" v-model="model.rzServiceData.policyProduct">
                                <el-checkbox v-for="(item, index) in options.policyProduct" :key="index"
                                    :label="item.name" :value="item.id" />
                            </el-checkbox-group>
                        </template>
                        <template v-slot:strategy>
                            <el-checkbox-group :disabled="isAudit" v-model="model.rzServiceData.strategy">
                                <el-checkbox v-for="(item, index) in options.strategy" :key="index" :label="item.name"
                                    :value="item.id" />
                            </el-checkbox-group>
                        </template>
                        <template v-slot:relationName>
                            <div class="d_f j_c_s_b " id="relation"
                                v-if="model.rzServiceData.otherBusinessType == '88'">
                                <div style="width: 45%;">
                                    关联方名称
                                    <el-input v-model="model.rzServiceData.relationName" placeholder="请输入" clearable />
                                </div>
                                <div style="width: 45%;">
                                    关联方关系
                                    <el-select clearable v-model="model.rzServiceData.relation" no-match-text="无匹配数据"
                                        no-data-text='无匹配数据' placeholder="请选择">
                                        <el-option v-for="opt in options.relation" :key="opt.id" :label="opt.name"
                                            :value="opt.id" :disabled="opt.disabled" />
                                    </el-select>
                                </div>
                            </div>
                        </template>
                    </myform>
                </div>
            </div>
            <div class="segment" v-if="fields4.length > 0"></div>
            <div class="formArrow d_f a_i_c m_t_30" v-if="fields4.length > 0">
                <img src="../../assets/formArrow.png" alt="">
                <span>{{ subTitle || '新加字段' }}</span>
            </div>
            <div v-if="fields4.length > 0">
                <myform :fields="fields4" :model="model.rzServiceData" :options="options" class="m_t_16">
                </myform>
            </div>
        </div>

    </div>
</template>

<script lang='ts'>
import { defineComponent, reactive, toRefs, onBeforeMount, ref, watch } from 'vue'
import { CloseBold } from '@element-plus/icons-vue'
import { copy } from '../../utils/date'
import { formGet, unitFormSet } from '../../api/system/flowPath'
import { listByParentArr } from '../../api/login'
import { Message } from '../../utils/resetMessage'
import { useRouter } from 'vue-router'
import { zrrRzYwxxType } from './data'
import { PHONE_REG, END_NUM, NUMBRT_REG, CARD, INTEGER } from '../../utils/regular'
const model = {
    rzServiceData: {
        baseDataName: '',//姓名
        baseDataIdCard: '',//身份证号
        baseDataMobile: '',//联系方式
        baseDataMaritalStatus: '0',//婚姻状况 0-未婚，1-已婚，2-离异，3-丧偶
        baseDataMateName: '',//配偶姓名
        baseDataMateIdCard: '',//配偶身份证号
        baseDataMateMobile: '',//配偶联系方式
        baseDataAddress: null,//家庭地址
        baseDataDetailAddress: '',
        applyAmount: '',//申请金额
        applyDate: '',//申请日期
        applyPeriod: '',//期限
        purpose: '',//借款用途
        engage: '',//经营信息 
        annualHouseholdIncome: '',// 年收入 
        annualHouseholdExpend: '',// 年支出 
        familyHum: [],
        loan: '',//贷款情况
        guarantee: '',//担保情况
        counterGua: 1,//反担保情况：2-无，1-有
        counterGuaranteeMeasure: '',//反担保措施
        loanRemark: '',//负债备注
        engageType: '',
        industry: '',//行业
        guaType: 1,
        userTag: [],//业主标签
        businessLocation: '',
        otherBusinessType: '',
        policyProduct: [],//政策性产品分类
        strategy: [],//战略新兴及其它
        moreData: '',
        relationName: '',
        relation: '',
        name: '',//企业名称
        usci: '',//统一社会信用代码
        legalPerson: '',//法人姓名
        legalIdCard: '',//法人身份证
        legalMobile: '',//法人联系电话
        legalMaritalStatus: '0',//法人婚姻状况 0-未婚，1-已婚，2-离异，3-丧偶
        legalMaritalName: '',//法人配偶姓名
        legalMaritalIdCard: '',//法人配偶身份证
        legalMaritalMobile: '',//法人配偶联系电话
        actualPerson: '',//实际控制人
        actualMateName: '',//实控人配偶姓名
        actualIdCard: '',//实控人身份证
        actualMobile: '',//实控人联系电话
        actualMaritalStatus: '0',//实控人婚姻状况0-未婚，1-已婚，2-离异，3-丧偶
        actualMateIdCard: '',//实控人配偶身份证
        actualMateMobile: '',//实控人配偶联系电话
        engageAddress: null,//经营地址
        engageDetailAddress: '',//详细地址
        isReview: 1,
        customerType: 1,//1自然人，2法人
    },



}
const values = {
    customerId: 0,//客户ID
    name: '',//姓名
    relation: '',//与业主的关系
    job: '',//职业
}
export default defineComponent({
    name: 'zzrRzYwxx',
    props: {
        type: {
            type: String,
            default: '',
        },
        unitId: {
            type: [String, Number],
            default: '',
        },
        isEnabled: {
            type: Number,
            default: '',
        },
        vars: {
            type: [Object, null],
            default: null
        },
        customerType: {
            type: String,
            default: '1'
        },
        isAudit: {
            type: Boolean,
            default: true
        },
        isIncoming: {
            type: Boolean,
            default: true
        }
    },
    components: {
        CloseBold
    },
    setup(props: any, { emit }: any) {
        const data: zrrRzYwxxType = reactive({
            name: '业务信息',
            subTitle: '',
            status: true,
            values: copy(values),
            show: false,
            districts: [],
            model: copy(model),
            areaProps: {
                multiple: false,
                value: 'name',
                label: 'name',
                children: 'districts'
            },
            options: {
                guaType: [
                    {
                        label: '直接担保',
                        value: 1
                    },
                    {
                        label: '再担保',
                        value: 2
                    },
                ],
                customerType: [
                    {
                        label: '自然人',
                        value: 1,
                        disabled: false
                    },
                    {
                        label: '法人',
                        value: 2,
                        disabled: false
                    },
                ],
                legalMaritalStatus: [

                    {
                        label: '未婚',
                        value: '0',
                    },
                    {
                        label: '已婚',
                        value: '1',
                    },
                    {
                        label: '离异',
                        value: '2',
                    },
                    {
                        label: '丧偶',
                        value: '3',
                    },
                ],
                actualMaritalStatus: [
                    {
                        label: '未婚',
                        value: '0',
                    },
                    {
                        label: '已婚',
                        value: '1',
                    },
                    {
                        label: '离异',
                        value: '2',
                    },
                    {
                        label: '丧偶',
                        value: '3',
                    },
                ],
                baseDataMaritalStatus: [
                    {
                        label: '未婚',
                        value: '0',
                    },
                    {
                        label: '已婚',
                        value: '1',
                    },
                    {
                        label: '离异',
                        value: '2',
                    },
                    {
                        label: '丧偶',
                        value: '3',
                    },
                ],
                counterGua: [
                    {
                        label: '无',
                        value: 2,
                    },
                    {
                        label: '有',
                        value: 1,
                    },
                ],
                userTag: [],
                policyProduct: [],
                strategy: [],
                otherBusinessType: [],
                relation: [],
                engageType: [],
                industry: [],
                businessLocation: [],
            },
            typeFields: [
                {
                    label: "客户类型",
                    prop: 'customerType',
                    type: 'radio',
                    labelWidth: '130px',
                    disabled: false,
                },
            ],
            fields: [
                {
                    label: "姓名",
                    prop: 'baseDataName',
                    placeholder: '请输入姓名',
                    type: 'input',
                    labelWidth: '130px',
                    disabled: false,
                },
                {
                    label: "身份证号",
                    prop: 'baseDataIdCard',
                    placeholder: '请输入身份证号',
                    type: 'input',
                    labelWidth: '130px',
                    disabled: false,
                },
                {
                    label: "联系方式",
                    prop: 'baseDataMobile',
                    placeholder: '请输入联系方式',
                    type: 'input',
                    labelWidth: '130px',
                    disabled: false,
                },
                {
                    label: "法人婚姻状况",
                    prop: 'baseDataMaritalStatus',
                    type: 'radio',
                    labelWidth: '150px',
                    disabled: false,
                },
                {
                    label: "配偶姓名",
                    prop: 'baseDataMateName',
                    placeholder: '已婚填写',
                    type: 'input',
                    labelWidth: '130px',
                    disabled: false,
                    show: true,
                },
                {
                    label: "配偶身份证号",
                    prop: 'baseDataMateIdCard',
                    placeholder: '已婚填写',
                    type: 'input',
                    labelWidth: '130px',
                    disabled: false,
                    show: true,
                },
                {
                    label: "配偶联系电话",
                    prop: 'baseDataMateMobile',
                    placeholder: '已婚填写',
                    type: 'input',
                    labelWidth: '130px',
                    disabled: false,
                    show: true,
                },
                {
                    label: "",
                    prop: '',
                    labelWidth: '130px',
                    disabled: false,
                    show: true,
                },
                {
                    label: "家庭地址",
                    prop: 'baseDataAddress',
                    labelWidth: '130px',
                    disabled: false,
                },
                {
                    label: " ",
                    prop: 'baseDataDetailAddress',
                    placeholder: '请填入详细住址',
                    type: 'input',
                    labelWidth: '130px',
                    disabled: false,
                },
                {
                    label: "申请金额",
                    prop: 'applyAmount',
                    placeholder: '请输入',
                    type: 'input',
                    labelWidth: '130px',
                    unit: '元',
                    disabled: false,
                },
                {
                    label: "申请日期",
                    prop: 'applyDate',
                    placeholder: '请输入',
                    type: 'date',
                    labelWidth: '130px',
                    disabled: false,
                },
                {
                    label: "期限",
                    prop: 'applyPeriod',
                    placeholder: '请输入',
                    type: 'number',
                    labelWidth: '130px',
                    unit: '个月',
                    disabled: false,
                },
                {
                    label: "",
                    prop: '',
                    labelWidth: '130px',
                    disabled: false,
                },
                {
                    label: "借款用途",
                    prop: 'purpose',
                    placeholder: '请输入内容',
                    type: 'textarea',
                    labelWidth: '130px',
                    disabled: false,
                },
                {
                    label: "经营信息",
                    prop: 'engage',
                    placeholder: '包括主营业务范围、生产资料情况、经营规模、上年度生产情况、经营情况、水电费用等',
                    type: 'textarea',
                    labelWidth: '130px',
                    disabled: false,
                },
            ],
            fields1: [
                {
                    label: "家庭年收入",
                    disabled: false,
                    prop: 'annualHouseholdIncome',
                    placeholder: '请输入',
                    type: 'input',
                    labelWidth: '130px',
                    unit: '元'
                },
                {
                    label: "家庭年支出",
                    prop: 'annualHouseholdExpend',
                    placeholder: '请输入',
                    type: 'input',
                    labelWidth: '130px',
                    unit: '元',
                    disabled: false,
                },
                {
                    label: "家庭成员",
                    prop: 'familyName',
                    labelWidth: '130px',
                    disabled: false,
                },
            ],
            fields2: [
                {
                    label: "现有银行贷款",
                    prop: 'loan',
                    placeholder: '若无银行贷款，需填写“0”',
                    type: 'textarea',
                    labelWidth: '130px',
                    disabled: false,
                },
                {
                    label: "对外担保情况",
                    prop: 'guarantee',
                    placeholder: '若无对外担保，需填写“0”',
                    type: 'textarea',
                    labelWidth: '130px',
                    disabled: false,
                },
                {
                    label: "反担保情况",
                    prop: 'counterGua',
                    type: 'radio',
                    labelWidth: '130px',
                    disabled: false,
                },
                {
                    label: "具体反担保措施",
                    prop: 'counterGuaranteeMeasure',
                    placeholder: '有无其他抵（质）押措施，若有需说明',
                    type: 'textarea',
                    labelWidth: '130px',
                    disabled: true,
                    show: false,
                },
                {
                    label: "备注说明",
                    prop: 'loanRemark',
                    placeholder: '选填',
                    type: 'textarea',
                    labelWidth: '130px',
                    disabled: false,
                },
            ],
            fields3: [
                {
                    label: "行业",
                    prop: 'industry',
                    placeholder: '请选择',
                    type: 'select',
                    bindLabel: 'name',
                    bindValue: 'id',
                    labelWidth: '130px',
                    disabled: false,
                },
                {
                    label: "担保性质",
                    prop: 'guaType',
                    placeholder: '请选择',
                    type: 'radio',
                    labelWidth: '130px',
                    disabled: false,
                },
                {
                    label: "业务类别",
                    prop: 'otherBusinessType',
                    placeholder: '请选择',
                    type: 'radio',
                    labelWidth: '130px',
                    disabled: false,
                    show: false,
                },
                {
                    label: " ",
                    prop: 'relationName',
                    labelWidth: '130px',
                    disabled: false,
                },
                {
                    label: "业主标签",
                    prop: 'userTag',
                    labelWidth: '130px',
                    disabled: false,
                },

                {
                    label: "业务发生地",
                    prop: 'businessLocation',
                    placeholder: '请选择',
                    type: 'select',
                    bindLabel: 'name',
                    bindValue: 'id',
                    labelWidth: '130px',
                    disabled: false,
                    show: true,
                },
                {
                    label: "政策性产品分类",
                    prop: 'policyProduct',
                    labelWidth: '130px',
                    disabled: false,
                },
                {
                    label: "战略新兴及其他",
                    prop: 'strategy',
                    labelWidth: '130px',
                    disabled: false,
                },
                {
                    label: "更多信息",
                    prop: 'moreData',
                    placeholder: '请输入其他重要信息',
                    type: 'textarea',
                    labelWidth: '130px',
                    disabled: false,
                },
            ],
            rules: {
                baseDataName: [
                    { required: true, message: '请输入姓名', trigger: 'blur' },
                ],
                baseDataIdCard: [
                    { required: true, message: '请输入身份证号', trigger: 'blur' },
                    { pattern: CARD, message: '身份证号格式不正确' }
                ],
                baseDataMobile: [
                    { required: true, message: '请输入联系方式', trigger: 'blur' },
                    { pattern: PHONE_REG, message: '联系方式格式不正确' }
                ],
                baseDataMaritalStatus: [
                    { required: true, message: '请选择婚姻状况', trigger: 'blur' },
                ],
                baseDataMateName: [
                    { required: true, message: '请输入配偶姓名', trigger: 'blur' },
                ],
                baseDataMateIdCard: [
                    { required: true, message: '请输入配偶身份证号', trigger: 'blur' },
                    { pattern: CARD, message: '身份证号格式不正确' }
                ],
                baseDataMateMobile: [
                    { required: true, message: '请输入配偶联系方式', trigger: 'blur' },
                    { pattern: PHONE_REG, message: '联系方式格式不正确' }
                ],
                // baseDataAddress: [
                //     { required: true, message: '请选择家庭地址', trigger: 'change' },
                // ],
                // baseDataDetailAddress: [
                //     { required: true, message: '请输入详细地址', trigger: 'blur' },
                // ],
                applyAmount: [
                    { required: true, message: '请输入申请金额', trigger: 'blur' },
                    { pattern: NUMBRT_REG, message: '申请金额格式不正确' }
                ],
                applyDate: [
                    { required: true, message: '请选择申请日期', trigger: 'change' },
                ],
                applyPeriod: [
                    { required: true, message: '请输入期限', trigger: 'blur' },
                    { pattern: INTEGER, message: '期限格式不正确' }
                ],
                purpose: [
                    { required: true, message: '请输入借款用途', trigger: 'blur' },
                ],
                guaType: [
                    { required: true, message: '请选择担保性质', trigger: 'blur' },
                ],
                counterGua: [
                    { required: true, message: '请选择担保情况', trigger: 'blur' },
                ],
                counterGuaranteeMeasure: [
                    { required: true, message: '请输入具体反担保措施', trigger: 'blur' },
                ],
            },
            fields4: [],
            tableFields: [
                {
                    label: '姓名',
                    prop: 'name',
                },
                {
                    label: '与业主关系',
                    prop: 'relation',
                },
                {
                    label: '职业',
                    prop: 'job',
                },
            ],
            id: '',
            fields5: [
                {
                    label: "企业名称",
                    prop: 'name',
                    placeholder: '请输入企业名称',
                    type: 'input',
                    labelWidth: '150px'
                },
                {
                    label: "统一社会信用代码",
                    prop: 'usci',
                    placeholder: '请输入统一社会信用代码',
                    type: 'input',
                    labelWidth: '150px'
                },
                {
                    label: "法人姓名",
                    prop: 'legalPerson',
                    placeholder: '请输入法人姓名',
                    type: 'input',
                    labelWidth: '150px'
                },
                {
                    label: "法人身份证号",
                    prop: 'legalIdCard',
                    placeholder: '请输入法人身份证号',
                    type: 'input',
                    labelWidth: '150px'
                },
                {
                    label: "法人联系方式",
                    prop: 'legalMobile',
                    placeholder: '请输入法人联系方式',
                    type: 'input',
                    labelWidth: '150px'
                },
                {
                    label: "法人婚姻状况",
                    prop: 'legalMaritalStatus',
                    type: 'radio',
                    labelWidth: '150px'
                },
                {
                    label: "法人配偶姓名",
                    prop: 'legalMaritalName',
                    placeholder: '已婚填写',
                    type: 'input',
                    labelWidth: '150px',
                    disabled: false,
                    show: true
                },
                {
                    label: "法人配偶身份证号",
                    prop: 'legalMaritalIdCard',
                    placeholder: '已婚填写',
                    type: 'input',
                    labelWidth: '150px',
                    disabled: false,
                    show: true
                },
                {
                    label: "法人配偶联系电话",
                    prop: 'legalMaritalMobile',
                    placeholder: '已婚填写',
                    type: 'input',
                    labelWidth: '150px',
                    disabled: false,
                    show: true
                },
                {
                    label: "",
                    prop: '',
                    labelWidth: '150px',
                    show: true
                },
                {
                    label: "实控人姓名",
                    prop: 'actualPerson',
                    placeholder: '请输入实控人姓名',
                    type: 'input',
                    labelWidth: '150px',
                },
                {
                    label: "实控人身份证号",
                    prop: 'actualIdCard',
                    placeholder: '请输入实控人身份证号',
                    type: 'input',
                    labelWidth: '150px',
                },
                {
                    label: "实控人联系方式",
                    prop: 'actualMobile',
                    placeholder: '请输入实控人联系方式',
                    type: 'input',
                    labelWidth: '150px',
                },
                {
                    label: "实控人婚姻状况",
                    prop: 'actualMaritalStatus',
                    type: 'radio',
                    labelWidth: '150px'
                },
                {
                    label: "实控人配偶姓名",
                    prop: 'actualMateName',
                    placeholder: '已婚填写',
                    type: 'input',
                    labelWidth: '150px',
                    disabled: false,
                    show: true
                },
                {
                    label: "实控人配偶身份证号",
                    prop: 'actualMateIdCard',
                    placeholder: '已婚填写',
                    type: 'input',
                    labelWidth: '150px',
                    disabled: false,
                    show: true
                },
                {
                    label: "实控人配偶联系电话",
                    prop: 'actualMateMobile',
                    placeholder: '已婚填写',
                    type: 'input',
                    labelWidth: '150px',
                    disabled: false,
                    show: true
                },
                {
                    label: "",
                    prop: '',
                    labelWidth: '150px',
                    disabled: false,
                    show: true
                },
                {
                    label: "经营地址",
                    prop: 'engageAddress',
                    labelWidth: '150px',
                    disabled: false,
                },
                {
                    label: " ",
                    prop: 'engageDetailAddress',
                    placeholder: '请填入详细住址',
                    type: 'input',
                    labelWidth: '150px',
                    disabled: false,
                },
                {
                    label: "申请金额",
                    prop: 'applyAmount',
                    placeholder: '请输入',
                    type: 'input',
                    labelWidth: '150px',
                    unit: '元',
                    disabled: false,
                },
                {
                    label: "申请日期",
                    prop: 'applyDate',
                    placeholder: '请输入',
                    type: 'date',
                    labelWidth: '150px',
                    disabled: false,
                },
                {
                    label: "期限",
                    prop: 'applyPeriod',
                    placeholder: '请输入',
                    type: 'number',
                    labelWidth: '150px',
                    unit: '个月',
                    disabled: false,
                },
                {
                    label: "",
                    prop: '',
                    labelWidth: '150px',
                    disabled: false,
                },
                {
                    label: "借款用途",
                    prop: 'purpose',
                    placeholder: '请输入内容',
                    type: 'textarea',
                    labelWidth: '150px',
                    disabled: false,
                },
                {
                    label: "经营信息",
                    prop: 'engage',
                    placeholder: '包括主营业务范围、生产资料情况、经营规模、上年度生产情况、经营情况、水电费用等',
                    type: 'textarea',
                    labelWidth: '150px',
                    disabled: false,
                },
            ],
            fields6: [
                {
                    label: "现有银行贷款",
                    prop: 'loan',
                    placeholder: '若无银行贷款，需填写“0”',
                    type: 'textarea',
                    labelWidth: '150px',
                    disabled: false,
                },
                {
                    label: "经营场所",
                    prop: 'engageType',
                    type: 'radio',
                    labelWidth: '150px',
                    disabled: false,
                },
                {
                    label: "对外担保情况",
                    prop: 'guarantee',
                    placeholder: '若无对外担保，需填写“0”',
                    type: 'textarea',
                    labelWidth: '150px',
                    disabled: false,
                },
                {
                    label: "反担保情况",
                    prop: 'counterGua',
                    type: 'radio',
                    labelWidth: '150px',
                    disabled: false,
                },
                {
                    label: "具体反担保措施",
                    prop: 'counterGuaranteeMeasure',
                    placeholder: '有无其他抵（质）押措施，若有需说明',
                    type: 'textarea',
                    labelWidth: '150px',
                    disabled: true,
                },
                {
                    label: "备注说明",
                    prop: 'loanRemark',
                    placeholder: '选填',
                    type: 'textarea',
                    labelWidth: '150px',
                    disabled: false,
                },
            ],
            rules1: {
                name: [
                    { required: true, message: '请输入企业名称', trigger: 'blur' },
                ],
                usci: [
                    { required: true, message: '请输入统一社会信用代码', trigger: 'blur' },
                    { pattern: END_NUM, message: '统一社会信用代码格式不正确' }
                ],
                legalPerson: [
                    { required: true, message: '请输入法人姓名', trigger: 'blur' },
                ],
                legalIdCard: [
                    { required: true, message: '请输入法人身份证号', trigger: 'blur' },
                    { pattern: CARD, message: '身份证号格式不正确' }
                ],
                legalMobile: [
                    { required: true, message: '请输入法人联系电话', trigger: 'blur' },
                    { pattern: PHONE_REG, message: '联系电话格式不正确' }
                ],
                legalMaritalStatus: [
                    { required: true, message: '请选择法人婚姻状况', trigger: 'blur' },
                ],
                legalMaritalName: [
                    { required: true, message: '请输入法人配偶姓名', trigger: 'blur' },
                ],
                legalMaritalIdCard: [
                    { required: true, message: '请输入法人配偶身份证号', trigger: 'blur' },
                    { pattern: CARD, message: '身份证号格式不正确' }
                ],
                legalMaritalMobile: [
                    { required: true, message: '请输入法人配偶联系电话', trigger: 'blur' },
                    { pattern: PHONE_REG, message: '联系电话格式不正确' }
                ],
                actualPerson: [
                    { required: true, message: '请输入实际控制人', trigger: 'blur' },
                ],
                actualIdCard: [
                    { required: true, message: '请输入实控人身份证号', trigger: 'blur' },
                    { pattern: CARD, message: '身份证号格式不正确' }
                ],
                actualMobile: [
                    { required: true, message: '请输入实控人联系电话', trigger: 'blur' },
                    { pattern: PHONE_REG, message: '联系电话格式不正确' }
                ],
                actualMaritalStatus: [
                    { required: true, message: '请选择实控人婚姻状况', trigger: 'blur' },
                ],
                actualMateName: [
                    { required: true, message: '请输入实控人配偶姓名', trigger: 'blur' },
                ],
                actualMateIdCard: [
                    { required: true, message: '请输入实控人配偶身份证', trigger: 'blur' },
                    { pattern: END_NUM, message: '身份证号格式不正确' }
                ],
                actualMateMobile: [
                    { required: true, message: '请输入实控人配偶联系电话', trigger: 'blur' },
                    { pattern: PHONE_REG, message: '联系电话格式不正确' }
                ],
                engageAddress: [
                    { required: true, message: '请选择经营地址', trigger: 'change' },
                ],
                engageDetailAddress: [
                    { required: true, message: '请输入详细地址', trigger: 'blur' },
                ],
                applyAmount: [
                    { required: true, message: '请输入申请金额', trigger: 'blur' },
                    { pattern: NUMBRT_REG, message: '申请金额格式不正确' }
                ],
                applyDate: [
                    { required: true, message: '请选择申请日期', trigger: 'change' },
                ],
                applyPeriod: [
                    { required: true, message: '请输入期限', trigger: 'blur' },
                    { pattern: INTEGER, message: '期限格式不正确' }
                ],
                purpose: [
                    { required: true, message: '请输入借款用途', trigger: 'blur' },
                ],

            },
            isReset: 2,
        })
        const router = useRouter()
        const form1 = ref()
        const form2 = ref()
        const form3 = ref()
        onBeforeMount(() => {
            data.districts = JSON.parse(<string>localStorage.getItem('districts'))
            methods.getDictionary()
            data.status = props.isEnabled == 0 ? false : true
        })
        const methods = {
            //获取自定义表单
            getData(flag: Boolean) {
                formGet({ tag: 'zrrRzYwxx' }).then((res: any) => {
                    data.id = res.id
                    data.name = res.name
                    data.isReset = res.isReset
                    if (!res.formStruct || res.formStruct == 'null' || res.formStruct == '{}') return
                    data.subTitle = res.subTitle
                    let formStruct = JSON.parse(res.formStruct)
                    formStruct.formFields.map((item: any) => {
                        data.model.rzServiceData[item.prop] = ''
                    })
                    data.fields4 = formStruct.formFields
                    data.fields.map((item: any) => {
                        if (item.prop != 'mateName' || item.prop != 'mateMobile' || item.prop != 'mateIdCard') {
                            item.disabled = props.isAudit
                        }

                    })
                    data.typeFields.map((item: any) => {
                        item.disabled = props.isIncoming
                    })
                    data.fields1.map((item: any) => {
                        item.disabled = props.isAudit
                    })
                    data.fields2.map((item: any) => {
                        item.disabled = props.isAudit
                    })
                    data.fields3.map((item: any) => {
                        item.disabled = props.isAudit
                    })
                    data.fields4.map((item: any) => {
                        item.disabled = props.isAudit
                    })
                    data.fields5.map((item: any) => {
                        let arr = ['companyRegNo', 'companyRegAddress', 'companyRegDate', 'actualMateName', 'actualMateIdCard', 'actualMateMobile']
                        if (arr.some((em: string) => em !== item.prop)) {
                            item.disabled = props.isAudit
                        }

                    })
                    data.fields6.map((item: any) => {
                        item.disabled = props.isAudit
                    })
                    if (props.vars) {
                        const localData = copy(props.vars)
                        console.log(localData);
                        for (let key in data.model.rzServiceData) {
                            if (localData.rzServiceData[key] != null) {
                                data.model.rzServiceData[key] = localData.rzServiceData[key]
                            }
                        }
                        if (localData.rzServiceData) {

                            data.options.customerType.map((item: any) => {
                                item.disabled = flag
                            })
                        }
                        // if (data.model.rzServiceData.industry) {
                        //     data.model.rzServiceData.industry = Number(data.model.rzServiceData.industry)
                        // }
                        // data.model.rzServiceData.policyProduct = data.model.rzServiceData.policyProduct.map(Number)
                        // data.model.rzServiceData.strategy = data.model.rzServiceData.strategy.map(Number)
                        // data.model.rzServiceData.userTag = data.model.rzServiceData.userTag.map(Number)
                        data.options.userTag.map((item: any) => {
                            if (data.model.rzServiceData.userTag.some((em: any) => item.id == em)) {
                                item.checked = true
                            }
                        })
                        if (data.model.rzServiceData.baseDataMaritalStatus != null) {
                            data.model.rzServiceData.baseDataMaritalStatus = String(data.model.rzServiceData.baseDataMaritalStatus)
                        }
                        if (data.model.rzServiceData.actualMaritalStatus != null) {
                            data.model.rzServiceData.actualMaritalStatus = String(data.model.rzServiceData.actualMaritalStatus)
                        }
                        if (data.model.rzServiceData.legalMaritalStatus != null) {
                            data.model.rzServiceData.legalMaritalStatus = String(data.model.rzServiceData.legalMaritalStatus)
                        }
                        if (data.model.rzServiceData.guaType != null) {
                            data.model.rzServiceData.guaType = Number(data.model.rzServiceData.guaType)
                        }
                        // if (data.model.rzServiceData.businessLocation != null && data.model.rzServiceData.businessLocation != '') {
                        //     data.model.rzServiceData.businessLocation = Number(data.model.rzServiceData.businessLocation)
                        // }
                        // data.model.rzServiceData.industry=String(data.model.rzServiceData.industry)
                        // console.log(data.model.rzServiceData.industry);
                        // console.log(data.options.industry);
                        // if (!props.isAudit) {
                            methods.handleSelect('baseDataMaritalStatus')//校验表单是不是要禁用
                            methods.handleSelect('legalMaritalStatus')//校验表单是不是要禁用
                            methods.handleSelect('actualMaritalStatus')//校验表单是不是要禁用
                            methods.handleSelect('counterGua')//校验表单是不是要禁用
                        // }
                        if (props.isAudit && data.model.rzServiceData.baseDataMaritalStatus != '0') {
                            data.rules.baseDataMateName[0].required = data.rules.baseDataMateIdCard[0].required = data.rules.baseDataMateMobile[0].required = false

                        } if (props.isAudit && data.model.rzServiceData.legalMaritalStatus != '0') {

                            data.rules1.legalMaritalName[0].required = data.rules1.legalMaritalIdCard[0].required = data.rules1.legalMaritalMobile[0].required = false

                        }
                        if (props.isAudit && data.model.rzServiceData.actualMaritalStatus != '0') {

                            data.rules1.actualMateIdCard[0].required = data.rules1.actualMateMobile[0].required = data.rules1.actualMateName[0].required = false
                        }
                        if (props.isAudit && data.model.rzServiceData.counterGua == 2) {
                            data.rules.counterGuaranteeMeasure[0].required = false
                        }
                    }
                    let arr = formStruct.formFields.filter((item: any) => {
                        return item.type == 'select'
                    })
                    let ids = arr.map((item: any) => {
                        return item.prop
                    })
                    if (ids.length == 0) return
                    listByParentArr({ ids: ids }).then((res: any) => {
                        ids.map((item: any) => {
                            data.options[item] = res[item]
                        })
                    })
                })
            },
            getDictionary() {
                listByParentArr({ ids: ['PROPRIETOR_TAG', 'POLICY_PRODUCTS', 'WAR_EMERGING_OTHER', 'INDUSTRY', 'RZ_BIZ_TYPE', 'BUSINESSLOCATION', 'RELATION', 'SITE'] }).then((res: any) => {
                    data.options.userTag = res.PROPRIETOR_TAG
                    data.options.policyProduct = res.POLICY_PRODUCTS
                    data.options.strategy = res.WAR_EMERGING_OTHER
                    data.options.industry = res.INDUSTRY
                    data.options.otherBusinessType = res.RZ_BIZ_TYPE
                    data.options.businessLocation = res.BUSINESSLOCATION
                    data.options.relation = res.RELATION

                    data.options.engageType = res.SITE
                    data.options.userTag.map((item: any) => {
                        item.checked = false
                    })
                    methods.getData(true)
                })
            },
            //根据单选框禁用表单
            handleSelect(prop: string) {
                if (prop == 'baseDataMaritalStatus') {
                    if (data.model.rzServiceData.baseDataMaritalStatus != '1') {
                        data.fields[4].show = data.fields[5].show = data.fields[6].show = data.fields[7].show = true
                        // data.rules.baseDataMateName[0].required = data.rules.baseDataMateIdCard[0].required = data.rules.baseDataMateMobile[0].required = true

                    } else {
                        data.fields[4].show = data.fields[5].show = data.fields[6].show = data.fields[7].show = false
                        // data.rules.baseDataMateName[0].required = data.rules.baseDataMateIdCard[0].required = data.rules.baseDataMateMobile[0].required = false
                    }
                }
                if (prop == 'legalMaritalStatus') {
                    if (data.model.rzServiceData.legalMaritalStatus != '1') {
                        data.fields5[6].show = data.fields5[7].show = data.fields5[8].show = data.fields5[9].show = true
                       
                    } else {
                        data.fields5[6].show = data.fields5[7].show = data.fields5[8].show = data.fields5[9].show = false
                       
                    }
                } else if (prop == 'actualMaritalStatus') {
                    if (data.model.rzServiceData.actualMaritalStatus != '1') {
                        data.fields5[14].show = data.fields5[15].show = data.fields5[16].show = data.fields5[17].show = true
                        
                    } else {
                        data.fields5[14].show = data.fields5[15].show = data.fields5[16].show = data.fields5[17].show = false
                    }
                }

                else if (prop == 'customerType') {
                    emit("handleSelect", { prop: 'customerType', value: data.model.rzServiceData.customerType });
                } else if (prop == 'baseDataIdCard') {
                    emit("handleSelect", { prop: 'idCard', value: data.model.rzServiceData.baseDataIdCard });
                } else if (prop == 'usci') {
                    emit("handleSelect", { prop: 'usci', value: data.model.rzServiceData.usci });
                } else if (prop == 'counterGua') {

                    if (data.model.rzServiceData.counterGua == 1) {
                        data.fields2[3].show = false
                        data.fields6[4].show = false
                        // data.rules.counterGuaranteeMeasure[0].required = true
                    } else {

                        data.fields2[3].show = true
                        data.fields6[4].show = true
                        // data.rules.counterGuaranteeMeasure[0].required = false
                    }
                } else if (prop == 'guaType') {
                    if (data.model.rzServiceData.guaType == 1) {
                        data.fields3[2].show = false
                    } else {
                        data.fields3[2].show = true
                        data.model.rzServiceData.otherBusinessType=data.model.rzServiceData.relation=data.model.rzServiceData.relationName =''
                    }
                }
            },
            //提交新增家庭成员
            success() {
                if (!data.values.name) {
                    Message({ type: 'error', message: '请输入姓名' })
                    return
                }
                if (!data.values.relation) {
                    Message({ type: 'error', message: '请输入与业主的关系' })
                    return
                }
                if (!data.values.job) {
                    Message({ type: 'error', message: '请输入职业' })
                    return
                }
                data.model.rzServiceData.familyHum.push(data.values)
                data.model.rzServiceData.familyName = '123'
                data.show = false
                data.values = copy(values)
            },
            reduce() {
                data.model.rzServiceData.familyHum.splice(data.model.rzServiceData.familyHum.length - 1, 1)
                if (data.model.rzServiceData.familyHum.length == 0) {
                    data.model.rzServiceData.familyName = ''
                }
            },
            close() {
                router.push('/system/flowPath/childForm/index')
            },
            getTag(item: any, index: number) {
                if (props.isAudit) return
                data.options.userTag[index].checked = !item.checked
                let userTag = data.options.userTag.filter((item: any) => {
                    return item.checked
                })
                data.model.rzServiceData.userTag = userTag.map((item: any) => {
                    return item.id
                })
                if (data.model.rzServiceData.userTag.some((item: any) => item == '1815265066235248658')) {
                    data.fields3[5].show = false
                } else {
                    data.fields3[5].show = true
                }
            },
            //设置表单的启用跟停用
            change() {
                unitFormSet({ isEnabled: data.status ? 1 : 0, id: data.id, unitId: props.unitId }).then(() => {
                    Message({ type: 'success', message: '设置成功' })
                }).catch(() => {
                    data.status = !data.status
                })
            },
            //清除表单数据
            clearForm() {
                let customerType = data.model.rzServiceData.customerType
                data.model = copy(model)
                data.model.rzServiceData.customerType = customerType
                methods.handleSelect('maritalStatus')//校验表单是不是要禁用
                methods.handleSelect('legalMaritalStatus')//校验表单是不是要禁用
                methods.handleSelect('actualMaritalStatus')//校验表单是不是要禁用
            },
            resultData() {
                console.log(data.model);
                return new Promise((resolve, reject) => {
                    if (data.model.rzServiceData.customerType == '1') {
                        form1.value.verification().then(() => {
                            form3.value.verification().then(() => {
                                resolve(data.model)
                            }).catch(() => {
                                reject(false)
                            })
                        }).catch(() => {
                            reject(false)
                        })
                    } else {
                        form2.value.verification().then(() => {
                            form3.value.verification().then(() => {
                                resolve(data.model)
                            }).catch(() => {
                                reject(false)
                            })
                        }).catch(() => {
                            reject(false)
                        })
                    }


                })
            },
            saveData() {
                return new Promise((resolve, reject) => {
                    resolve(data.model)
                })
            },
            changeCustomerType(customerType: string) {
                data.model.rzServiceData.customerType = Number(customerType)
            },
            changeVars() {
                methods.getData(false)
            },
        }
        return {
            ...toRefs(data),
            ...methods, form1, form2, form3
        }
    }
})
</script>
<style lang='scss'>
.fzRzYwxx {

    .el-form-item {
        width: 50% !important;
        margin-right: 0px !important;

        .el-form-item__content {
            width: calc(100% - 130px) !important;

            .el-input,
            .el-cascader,
            .el-select {
                width: 100% !important;
            }
        }

    }

    .el-form-item:nth-child(10) {
        .el-form-item__label::before {
            display: none !important;
        }
    }
}

.naturalBusiness_form1 {
    .el-form-item:nth-child(11),
    .el-form-item:nth-child(12) {
        width: 100% !important;
    }
   
}

.naturalBusiness_form1Show {

    .el-form-item:nth-child(15),
    .el-form-item:nth-child(16) {
        width: 100% !important;
    }
}

.naturalBusiness_form3 {
    .el-form-item {
        width: 100% !important;
    }
}

.naturalBusiness_form2 {
    .el-form-item:nth-child(3) {
        width: 100% !important;

        // .el-form-item__label::before {
        //     color: var(--el-color-danger);
        //     content: "*";
        //     margin-right: 4px;
        // }

        .icon {
            width: 26px;
            height: 26px;
            cursor: pointer;
        }

        .input {
            width: 30% !important;
        }
    }

}

.naturalBusiness_form4 {
    .left {
        margin-left: -10px;
    }

    .el-form-item {
        width: 100% !important;

        .input {
            width: 30% !important;
        }
    }

    .box {
        border: 1px solid #D0D3D9;
        padding: 0px 16px;
        height: 32px;
        color: rgba(0, 0, 0, 0.9);
        font-size: 14px;
        border-radius: 3px;
    }
    .box1{
        border: 1px solid #D0D3D9;
        padding: 0px 16px;
        height: 32px;
        color: #909399;
        font-size: 14px;
        border-radius: 3px; 
    }
    .negative {
        margin-left: 0px !important;
    }

    .active {
        border: 1px solid #1B5ED1 !important;
        color: #1B5ED1 !important;
    }
    .active1 {
        border: 1px solid #000 !important;
        color: #000 !important;
    }
}

.fzRzYwxx_form1 {
    .el-form-item:nth-child(17),
    .el-form-item:nth-child(18) {
        width: 100% !important;
    }
    
}

.fzRzYwxx_form1Show1 {

    .el-form-item:nth-child(21),
    .el-form-item:nth-child(22) {
        width: 100% !important;
    }
   
}

.fzRzYwxx_form1Show2 {
    .el-form-item:nth-child(21),
    .el-form-item:nth-child(22) {
        width: 50% !important;
    }
    .el-form-item:nth-child(25),
    .el-form-item:nth-child(26) {
        width: 100% !important;
    }
    
}

#relation {
    width: 100%;

    .el-input,
    .el-select {
        width: 45% !important;

    }

}
</style>